animation: Optionally animate spinner start/stop

In contrast to generic animated icons, it is reasonable to expect
spinners to be invisible while inactive. Implement that behavior
in the new Spinner class and optionally animate the transitions.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/316

diff --git a/js/ui/animation.js b/js/ui/animation.js
index ebd7972c17f761319dbe49a9f72bb1b56fa5a773..5b4a10c085e4c13f9b93546734caac446e6bb0f3 100644 (file)
--- a/js/ui/animation.js
+++ b/js/ui/animation.js
@@ -8,7 +8,11 @@ const St = imports.gi.St;
 const Signals = imports.signals;
 const Atk = imports.gi.Atk;
 
+const Tweener = imports.ui.tweener;
+
 var ANIMATED_ICON_UPDATE_TIMEOUT = 16;
+var SPINNER_ANIMATION_TIME = 0.3;
+var SPINNER_ANIMATION_DELAY = 1.0;
 
 var Animation = new Lang.Class({
     Name: 'Animation',
@@ -92,8 +96,46 @@ var Spinner = new Lang.Class({
     Name: 'Spinner',
     Extends: AnimatedIcon,
 
-    _init(size) {
+    _init(size, animate=false) {
         let file = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/process-working.svg');
         this.parent(file, size);
+
+        this.actor.opacity = 0;
+        this._animate = animate;
+    },
+
+    play() {
+        Tweener.removeTweens(this.actor);
+
+        if (this._animate) {
+            this.parent();
+            Tweener.addTween(this.actor, {
+                opacity: 255,
+                delay: SPINNER_ANIMATION_DELAY,
+                time: SPINNER_ANIMATION_TIME,
+                transition: 'linear'
+            });
+        } else {
+            this.actor.opacity = 255;
+            this.parent();
+        }
+    },
+
+    stop() {
+        Tweener.removeTweens(this.actor);
+
+        if (this._animate) {
+            Tweener.addTween(this.actor, {
+                opacity: 0,
+                time: SPINNER_ANIMATION_TIME,
+                transition: 'linear',
+                onComplete: () => {
+                    this.stop(false);
+                }
+            });
+        } else {
+            this.actor.opacity = 0;
+            this.parent();
+        }
     }
 });

diff --git a/js/ui/components/keyring.js b/js/ui/components/keyring.js
index 037bc097a952bfd013bf559df9c03ed1d790c505..180b86556b475e9b809ddcc7faa85c881706590a 100644 (file)
--- a/js/ui/components/keyring.js
+++ b/js/ui/components/keyring.js
@@ -17,8 +17,6 @@ const CheckBox = imports.ui.checkBox;
 const Tweener = imports.ui.tweener;
 
 var WORK_SPINNER_ICON_SIZE = 16;
-var WORK_SPINNER_ANIMATION_DELAY = 1.0;
-var WORK_SPINNER_ANIMATION_TIME = 0.3;
 
 var KeyringDialog = new Lang.Class({
     Name: 'KeyringDialog',
@@ -69,27 +67,10 @@ var KeyringDialog = new Lang.Class({
         if (!this._workSpinner)
             return;
 
-        Tweener.removeTweens(this._workSpinner.actor);
-        if (working) {
+        if (working)
             this._workSpinner.play();
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 255,
-                               delay: WORK_SPINNER_ANIMATION_DELAY,
-                               time: WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear'
-                             });
-        } else {
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 0,
-                               time: WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear',
-                               onCompleteScope: this,
-                               onComplete() {
-                                   if (this._workSpinner)
-                                       this._workSpinner.stop();
-                               }
-                             });
-        }
+        else
+            this._workSpinner.stop();
     },
 
     _buildControlTable() {
@@ -114,8 +95,7 @@ var KeyringDialog = new Lang.Class({
             ShellEntry.addContextMenu(this._passwordEntry, { isPassword: true });
             this._passwordEntry.clutter_text.connect('activate', this._onPasswordActivate.bind(this));
 
-            this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE);
-            this._workSpinner.actor.opacity = 0;
+            this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, true);
 
             if (rtl) {
                 layout.attach(this._workSpinner.actor, 0, row, 1, 1);

diff --git a/js/ui/components/polkitAgent.js b/js/ui/components/polkitAgent.js
index 4bcbe30e7fbaa628de77b85457a4f50abe56b54f..4b2a2cacbf4cc8646dc6ddb9412e9f34c668fa79 100644 (file)
--- a/js/ui/components/polkitAgent.js
+++ b/js/ui/components/polkitAgent.js
@@ -25,8 +25,6 @@ const Tweener = imports.ui.tweener;
 var DIALOG_ICON_SIZE = 48;
 
 var WORK_SPINNER_ICON_SIZE = 16;
-var WORK_SPINNER_ANIMATION_DELAY = 1.0;
-var WORK_SPINNER_ANIMATION_TIME = 0.3;
 
 var AuthenticationDialog = new Lang.Class({
     Name: 'AuthenticationDialog',
@@ -117,9 +115,7 @@ var AuthenticationDialog = new Lang.Class({
         this._passwordBox.add(this._passwordEntry,
                               { expand: true });
 
-        this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE);
-        this._workSpinner.actor.opacity = 0;
-
+        this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, true);
         this._passwordBox.add(this._workSpinner.actor);
 
         this.setInitialKeyFocus(this._passwordEntry);
@@ -163,27 +159,10 @@ var AuthenticationDialog = new Lang.Class({
     },
 
     _setWorking(working) {
-        Tweener.removeTweens(this._workSpinner.actor);
-        if (working) {
+        if (working)
             this._workSpinner.play();
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 255,
-                               delay: WORK_SPINNER_ANIMATION_DELAY,
-                               time: WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear'
-                             });
-        } else {
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 0,
-                               time: WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear',
-                               onCompleteScope: this,
-                               onComplete() {
-                                   if (this._workSpinner)
-                                       this._workSpinner.stop();
-                               }
-                             });
-        }
+        else
+            this._workSpinner.stop();
     },
 
     performAuthentication() {